<template>
    <div style="width:1000px;margin:0 auto;">

        <!--商品信息-->
        <div>
            <el-row>
                <el-col :span="12">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
                </el-col>
                <el-col :span="12" style="text-align:left;">
                    <div>{{ sku.name }}</div>
                    <div style="color:red;font-size:30px;font-weight:600">￥{{ sku.salePrice.toFixed(2) }}</div>

                    <div v-for="(item, index) in specData" :key="index">
                        {{ item.specName }}
                        <el-radio-group v-model="radio2" size="medium">
                            <el-radio-button v-for="(a, b) in item.specValues" :key="b" :label="a"></el-radio-button>
                        </el-radio-group>
                    </div>

                    <!-- <div>内存
                        <el-radio-group v-model="radio3" size="medium">
                            <el-radio-button label="128G"></el-radio-button>
                            <el-radio-button label="256G"></el-radio-button>
                            <el-radio-button label="512G"></el-radio-button>
                            <el-radio-button label="1TB"></el-radio-button>
                        </el-radio-group>
                    </div> -->
                    <div>
                        <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1"
                            :max="10"></el-input-number>
                        <el-button type="danger" @click="eventAddCar">加入购物车</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>


        <!--商品介绍-->
        <div></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: '',  //接收前台列表页传过来的id
            sku: { salePrice: 0 }, //接收接口的sku信息
            images: [], //接收接口的图片信息
            specData: [], //接收接口的产品规格信息
            radio1: '上海',
            radio2: '上海',
            radio3: '上海',
            radio4: '上海',
            num: 1,
        };
    },

    mounted() {
        this.id = this.$route.query.id //'ed15da3b-ba05-4b2a-bd4d-da34838c06fa'
        this.onloadDetailData()
    },
    methods: {

        //加入购物车按钮
        eventAddCar() {
            //加入购物车，需要判断用户是否登录
            //怎么判断：获取cookie的值
            //如果没有登录，怎么办？
            //1、存入到cookie中
            //2、跳转到登录

            /**
             * cookie的使用
             * 1、安装包 npm install vue-cookies -S
             * 2、在main.js中，全局配置cookie
             * 3、使用cookie。用get获取，用set去设置  key/value的形式
             */

            let id = this.$cookies.get('ph5_2103a_login_user_id')
            if (id == null) {
                //说明没有登录，需要登录
                this.$router.push('/login')
            }
            else {
                //登录了，则把该商品加入购物车
                let url = 'http://localhost:5184/car'
                let data = {
                    "memberId": id,
                    "skuId": this.id,
                    "name": this.sku.name,
                    "price": this.sku.salePrice,
                    "number": this.num,
                    "image": "product/1.jpg",
                    "storeName": "店铺B"
                }
                this.$http.post(url, data).then(res => {
                    console.log(res);
                    this.$message.info('添加成功')
                })
            }

        },
        //加载页面数据
        onloadDetailData() {
            let url = this.$baseUrl + '/product/detail'
            this.$http.get(url, {
                params: {
                    id: this.id
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.images = res.data.data.images
                    this.sku = res.data.data.sku
                    this.specData = res.data.data.specs
                }
            })
        },

        handleChange(value) {
            console.log(value);
        },
    },




}
</script>